<div class="vt-toolbar vt-padding">
  <md-icon class="vt-menu" (click)="menu.toggle($event)">menu</md-icon>
  <p-menu #menu popup="popup" [model]="actions"></p-menu>
  <h1 class="vt-title">{{keyspaceName}}/{{shardName}}</h1>
  <md-icon class="vt-right-menu" (click)="refreshShardView()" [disabled]="inFlightQueries > 0">refresh</md-icon>
</div>
<div class="vt-tablet-container">
  <p-dataTable [value]="tablets" emptyMessage="">
    <p-column header="Actions">
      <template let-tab="rowData" let-i="rowIndex">
        <md-icon id="{{tab.uid}}" class="vt-menu" (click)="selectedTablet=tab; rowMenu.toggle($event)">menu</md-icon>
        <p-menu #rowMenu popup="popup" [model]="tab.type === 'master' ? tabletActionsMaster : tabletActionsSlave"></p-menu>
      </template>
    </p-column>
    <p-column field="type" header="Type" sortable="custom" (sortFunction)="sortByType($event)">
      <template let-tab="rowData">
        <span *ngIf="tab.type === 'master'"><strong>master</strong></span>
        <span *ngIf="tab.type === 'replica' || tab.type === 'rdonly'"><em>{{tab.type}}</em></span>
        <span *ngIf="tab.type !== 'master' && tab.type !== 'replica' && tab.type !== 'rdonly'">{{tab.type}}</span>
      </template>
    </p-column>
    <p-column field="cell" header="Cell" sortable="custom" (sortFunction)="sortByCell($event)"></p-column>
    <p-column field="uid" header="UID" sortable="true"></p-column>
    <p-column field="hostname" header="Host"></p-column>
    <p-column header="Ports">
      <template let-tab="rowData">
        <span *ngFor="let portName of portNames(tab)">
          <strong>{{portName}}:</strong> {{tab.port_map[portName]}},
        </span>
        <span *ngIf="tab.mysql_port"><strong>mysqld:</strong> {{tab.mysql_port}}</span>
      </template>
    </p-column>
    <p-column header="Status">
      <template let-tab="rowData">
        <a href="{{tab.url}}">
          <button md-button>Status</button>
        </a>
      </template>
    </p-column>
  </p-dataTable>
  <h3 class="vt-padding" *ngIf="noTablets">There are no tablets in this shard.</h3>
</div>

<p-dialog [(header)]="dialogSettings.dialogTitle" [(visible)]="dialogSettings.open" draggable="" resizable="" width="800">
  <vt-dialog [(dialogContent)]="dialogContent" [(dialogSettings)]="dialogSettings"></vt-dialog>
</p-dialog>
<div *ngIf="dialogSettings.open" class="vt-popUpContainer" >
</div>
